<template>
  <div class="map-content">
    <div ref="map" class="map"></div>
    <div class="layer-control"></div>
    <slot/>
  </div>
</template>

<script>
import DBMap from './constructorMap/DBmap'
import options from './json/gis.json'
import mixins from './mixins/mixins'

export default {
  name: 'MapView',
  components: {},
  props: {
    mapOptions: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  mixins: [mixins],
  data() {
    return {
      map: null,
      checkList: [],
      indexKey: null
    }
  },
  methods: {
    // 初始化一个 openlayers 地图
    initMap() {
      let target = this.$refs.map
      let gisIns = new DBMap(target, {...options, ...this.mapOptions})
      this.map = gisIns.map
      this.gisIns = gisIns
      window.map = this.map
      window.gisIns = gisIns
      this.mapEventHandle()
      // this.gisIns.addPoint('point', 103.76078219531979, 30.447544080702027)
      this.extendInit && this.extendInit()
    },
    clickHandle() {
    }
  },
  mounted() {
    this.initMap()
  }
}
</script>
<style lang="scss" scoped>
  @import url('./styles/style.scss');

  .map {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }

  ::v-deep.ol-popup {
    padding: 0;
    background-color: #001f2e;
    border-radius: 0;
    border: 1px solid #289aa4;

    .popup-title {
      .el-button {
        position: absolute;
        right: 5px;
        top: 6px;
        padding: 3px 5px;
        color: #fff;
        background-color: #5ec6fa;
      }
    }
  }

</style>
